<template>
	<view class="container">
		<image class="index-bg" :src="imgUrl + '/banner.png'" mode="widthFix"></image>
		<u-navbar title="物管申请" autoBack safeAreaInsetTop fixed bgColor="transparent" titleStyle="color: #ffffff;" leftIconSize="40" leftIconColor="#ffffff"></u-navbar>
		<view class="content">
			<view class="steps">
				<view class="step"><text>1 填写有效信息</text></view>
				<view class="step"><text>2 等待审核 (个人中心-申请记录可查看)</text></view>
			</view>
			<view class="form">
				<u--form :model="formData" :rules="rules" ref="form">
					<view class="form-item">
						<view class="form-item-title">个人信息</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="name">
								<u--input border="none" v-model="formData.name" clearable placeholder="姓名" shape="circle"></u--input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="phone">
								<u--input border="none" v-model="formData.phone" clearable placeholder="手机号码" shape="circle" type="digit"></u--input>
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="idcard">
								<u--input border="none" v-model="formData.idcard" clearable placeholder="身份证号码" shape="circle" type="idcard"></u--input>
							</u-form-item>
						</view>
					</view>

					<view class="form-item">
						<view class="form-item-title">管理区域</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="area">
								<u-input border="none" v-model="formData.area" clearable placeholder="区域信息" shape="circle"></u-input>
								<!-- <picker mode="region" @change="bindRegion" :value="region">
									<u-input readonly border="none" :value="formData.region" clearable placeholder="省市区" shape="circle">
										<template slot="suffix">
											<u-icon bold name="arrow-right" color="#000000" size="30"></u-icon>
										</template>
									</u-input>
								</picker> -->
							</u-form-item>
						</view>
						<view class="form-item-input">
							<u-form-item customStyle="background: #F4F6F9;border-radius: 44rpx;padding: 10rpx 20rpx;margin-bottom: 10rpx;" prop="building">
								<u-input border="none" v-model="formData.building" clearable placeholder="详细地址(例如**栋**号**)" shape="circle">
									<!-- <template slot="suffix">
										<u-icon @click="onMap" name="map" color="#186bfc" bold size="32"></u-icon>
									</template> -->
								</u-input>
							</u-form-item>
						</view>
					</view>

					<!-- <view class="form-item">
						<view class="form-item-title">身份信息</view>
						<view class="idcards">
							<u-upload width="300" height="180" name="idcardFront" @afterRead="afterRead" :fileList="idcardFront" @delete="deletePic" previewFullImage>
								<image
									v-if="!idcardFront[0].url"
									style="width: 150px;height: 90px;"
									src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
									mode="widthFix"
								></image>
							</u-upload>
							<u-upload widt h="300" height="180" name="idcardBack" @afterRead="afterRead" :fileList="idcardBack" @delete="deletePic" previewFullImage>
								<image
									v-if="!idcardBack[0].url"
									style="width: 150px;height: 90px;"
									src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
									mode="widthFix"
								></image>
							</u-upload>
						</view>
					</view> -->
				</u--form>
			</view>

			<view class="statusbar"></view>
		</view>

		<view class="btn"><u-button shape="circle" :loading="loading" type="primary" text="提交表单" @click="$u.debounce(submit, 300)"></u-button></view>
		<!-- <view class="btn button-primary" @tap="$u.debounce(submit, 300)">提交表单</view> -->
	</view>
</template>

<script>
export default {
	name: 'apply',
	data() {
		return {
			imgUrl: '',
			formData: {
				name: '卿鹏',
				phone: '17722330091',
				idcard: '440782199607116552',
				area: '恒源大厦',
				building: '1栋1号'
			},
			loading: false,
			// region: [],
			// 身份证信息
			// idcardFront: [],
			// idcardBack: [],

			rules: {
				name: {
					type: 'string',
					required: true,
					message: '请填写真实的姓名',
					trigger: ['blur', 'change']
				},
				phone: {
					type: 'string',
					required: true,
					message: '请填写有效的手机号码',
					trigger: ['blur', 'change'],
					pattern: /^1[3456789]\d{9}$/
				},
				idcard: {
					type: 'string',
					required: true,
					message: '请填写有效的身份证号码',
					trigger: ['blur', 'change'],
					pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
				},
				area: {
					type: 'string',
					required: true,
					message: '请填写区域信息',
					trigger: ['blur', 'change']
				},
				building: {
					type: 'string',
					required: true,
					message: '请填写详细地址信息',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onLoad() {
		this.imgUrl = this.resBaseUrl;
		// let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// this.menuButtonInfo = menuButtonInfo;
		// console.log(menuButtonInfo);
		this.areaList()
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		areaList(){
			this.$api.areaList().then(res => {

			})
		},
		submit(e) {
			var that = this;
			this.$refs.form.validate().then(res => {
				this.loading = true;
				this.$api
					.applyManage(this.formData)
					.then(res => {
						this.loading = false;
						if(res.status === 1){
							uni.$u.route({
								type: 'redirectTo',
								url: '/pages/manage/result'
							});
						}else{
							uni.$u.toast('提交失败');
						}
					})
					.catch(err => {
						this.loading = false;
					});

				// uni.$u.route({
				// 	type: 'redirectTo',
				// 	url: '/pages/manage/result'
				// });
			});
		}
		// getLocation() {
		// 	return new Promise((resolve, reject) => {
		// 		uni.getLocation({
		// 			success() {
		// 				resolve(true);
		// 			},
		// 			fail(err) {
		// 				console.log(err);
		// 				uni.getSetting({
		// 					success(res) {
		// 						if (!res.authSetting['scope.userLocation']) {
		// 							uni.openSetting();
		// 						}
		// 					}
		// 				});
		// 				reject(false);
		// 			}
		// 		});
		// 	});
		// },
		// onMap() {
		// 	var that = this;
		// 	this.getLocation().then(res => {
		// 		uni.chooseLocation({
		// 			success(res) {
		// 				// console.log('位置名称:' + res.name);
		// 				that.formData.address = res.address;
		// 				// console.log('纬度:' + res.latitude);
		// 				// console.log('经度:' + res.longitude);
		// 			},
		// 			fail(err) {
		// 				console.log(err);
		// 			}
		// 		});
		// 	});
		// },
		// bindRegion(e) {
		// 	this.formData.region = e.detail.value.join('-');
		// },
		// // 新增图片
		// async afterRead(event) {
		// 	console.log(event);
		// 	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		// 	let lists = [].concat(event.file);
		// 	let fileListLen = this[event.name].length;
		// 	lists.map(item => {
		// 		this[event.name].push({
		// 			...item,
		// 			status: 'uploading',
		// 			message: '上传中'
		// 		});
		// 	});
		// 	for (let i = 0; i < lists.length; i++) {
		// 		// const result = await this.uploadFilePromise(lists[i].url);
		// 		let item = this[event.name][fileListLen];
		// 		this[event.name].splice(
		// 			fileListLen,
		// 			1,
		// 			Object.assign(item, {
		// 				status: 'success',
		// 				message: ''
		// 				// url: result
		// 			})
		// 		);
		// 		fileListLen++;
		// 	}
		// },
		// // 删除图片
		// deletePic(event) {
		// 	console.log(event);
		// 	this[event.name].splice(event.index, 1);
		// },
	}
};
</script>
<style scoped>
/deep/.u-upload__wrap {
	justify-content: center;
}
</style>
<style lang="scss" scoped>
.container {
	position: relative;
	.index-bg {
		// position: fixed;
		// left: 0;
		// top: 0;
		width: 100%;
		height: 422rpx;
	}
	.content {
		z-index: 11;
		width: 100%;
		position: absolute;
		top: 240rpx;
		left: 0;
		.steps {
			display: flex;
			flex-direction: column;
			color: #fff;
			padding: 0 32rpx;
			.step {
				display: flex;
				margin-bottom: 10rpx;
				text {
					font-size: 24rpx;
					height: 44rpx;
					line-height: 44rpx;
					background-color: #186bfc;
					border-radius: 22rpx;
					padding: 0 16rpx;
				}
			}
		}
		.form {
			.form-item {
				margin-top: 32rpx;
				padding: 0 32rpx;
				border-radius: 20rpx;
				background-color: #fff;
				.idcards {
					display: flex;
					justify-content: space-between;
					padding-bottom: 32rpx;
				}
				.form-item-title {
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					padding: 20rpx 0;
				}
				.form-item-input {
					min-height: 60px;
				}
			}
			.input-right-icon {
				margin-left: 20rpx;
			}
		}
		.statusbar {
			width: 100%;
			height: calc(env(safe-area-inset-bottom) + 120rpx);
		}
	}
	.btn {
		z-index: 22;
		position: fixed;
		width: 688rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: env(safe-area-inset-bottom);
	}
}
</style>
